<template>
  <div class="navigationMenu">
    <Tabs :value="tabVal" type="card" @on-click="tabValChange">
      <TabPane label="后台菜单" name="1"></TabPane>
      <TabPane label="app菜单" name="2"></TabPane>
    </Tabs>

    <div class="treeMenu" ref="TableHeight" :style="{ height: onresizeHeight + 'px' }">
      <div class="treeMenuLeft">
        <Tree :data="data1" @on-select-change="treeSelChange"></Tree>
      </div>
      <div class="treeMenuRight" v-if="menuData">
        <div class="menuCurr" v-if="childFlag">
          <p>
            <span>上级菜单ID：</span><span>{{
              menuData.parentId == "-1" ? "暂无父级菜单" : menuData.parentId
            }}</span>
          </p>
          <p>
            <span>上级菜单名称：</span><span>{{ parentName }}</span>
          </p>
          <p>
            <span>菜单ID：</span><span>{{ menuData.id }}</span>
          </p>
          <p>
            <span>菜单Code：</span><span>{{ menuData.menuCode }}</span>
          </p>
          <p>
            <span>菜单级别：</span><span>{{ menuData.menuLevel }}</span>
          </p>
          <p>
            <span>菜单名称：</span><span><Input v-model="menuData.title" placeholder="请输入菜单名字"
                style="width: 220px" maxlength="20" /></span>
          </p>
          <p>
            <span>菜单类型：</span><span>
              <RadioGroup v-model="menuData.menuType">
                <Radio :label="1">入口</Radio>
                <Radio :label="2">按钮</Radio>
              </RadioGroup>
            </span>
          </p>
          <div class="menuBtn">
            <Button type="warning" @click="menuDelete">删除</Button>
            <Button type="success" @click="menuUpdate">保存</Button>
            <Button type="primary" @click="createChildMenu">创建子菜单</Button>
          </div>
        </div>

        <div class="menuCurr" v-if="!childFlag">
          <p>
            <span>上级菜单ID：</span><span>{{ menuData.id }}</span>
          </p>
          <p>
            <span>上级菜单名称：</span><span>{{ menuData.title }}</span>
          </p>
          <p>
            <span>菜单名称：</span><span><Input v-model="createData.createMenuName"
                placeholder="请输入菜单名字" style="width: 220px" maxlength="20" /></span>
          </p>
          <p>
            <span>菜单类型：</span><span>
              <RadioGroup v-model="createData.createMenuType">
                <Radio :label="1">入口</Radio>
                <Radio :label="2">按钮</Radio>
              </RadioGroup>
            </span>
          </p>

          <div class="menuBtn">
            <Button type="text" @click="createMenuNameCancel">取消</Button>
            <Button type="success" @click="menuSave">保存</Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import jurisdictionMgr from "@/biz/jurisdiction/jurisdiction";
  import userMgr from "@/biz/user";
  export default {
    name: "navigationMenu",
    data() {
      return {

        onresizeHeight: "",
        radioVal: "1",
        childFlag: true,
        tabVal: "1",
        menuData: "",
        createData: {
          createMenuName: "",
          // createMenuCode: '',
          createMenuType: "1",
        },

        parentName: "",
        data1: [],
        userId: userMgr.info().userId,
      };
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          setTimeout(() => {
            this.onresizeHeight =
              window.innerHeight - this.$refs.TableHeight.offsetTop - 50;
          }, 10);
        })();
      };
    },
    methods: {
      menuDelete() {
        this.$Modal.confirm({
          title: "删除菜单",
          content: `<p>确定删除菜单“${this.menuData.title}”？</p>`,
          onOk: () => {
            let params = {
              id: this.menuData.id,
              userId: this.userId,
              menuItem: this.tabVal, //1为后台菜单，2为APP菜单
            };
            jurisdictionMgr.functionMenuDelete(params)
              .then((res) => {
                this.$Message.success("菜单删除成功");
                this.createMenuNameCancel();
                this.getFunctionMenuList();
                this.menuData = "";
              })
              .catch((err) => {
                this.$Message.error(err);
              });
          },
          onCancel: () => {
            this.$Message.info("你取消了删除。");
          },
        });
      },
      menuUpdate() {
        let params = {
          id: this.menuData.id,
          title: this.menuData.title, //菜单名称
          menuType: this.menuData.menuType, //#菜单类型：1-入口，2-按钮
          userId: this.userId,
          menuItem: this.tabVal, //1为后台菜单，2为APP菜单
        };
        jurisdictionMgr
          .functionMenuUpdate(params)
          .then((res) => {
            this.$Message.success("菜单修改成功");
            this.createMenuNameCancel();
            this.getFunctionMenuList();
            this.menuData = "";
          })
          .catch((err) => {
            this.$Message.error(err);
          });
      },
      menuSave() {
        let params = {
          menuItem: this.tabVal, //1为后台菜单，2为APP菜单
          id: this.menuData.id, //上级菜单id
          title: this.createData.createMenuName, //菜单名称
          menuType: this.createData.createMenuType, //#菜单类型：1-入口，2-按钮
          // menuCode: this.createData.createMenuCode, //#菜单code
          userId: this.userId,
        };
        jurisdictionMgr
          .functionMenuSave(params)
          .then((res) => {
            this.$Message.success("菜单创建成功");
            this.createMenuNameCancel();
            this.getFunctionMenuList();
            this.menuData = "";
          })
          .catch((err) => {
            this.$Message.error(err);
          });
      },
      //初始化数据
      getFunctionMenuList() {
        let params = {
          menuItem: this.tabVal,
        };
        jurisdictionMgr
          .functionMenuList(params)
          .then((res) => {
            this.data1 = res;
          })
          .catch((err) => {
            this.$Message.error(err);
          });
      },
      // 选中tree
      treeSelChange(val) {
        let vv = this.$tool.deepClone(val);
        this.createMenuNameCancel();
        if (vv && vv.length) {
          this.menuData = vv[0];
          console.log(this.menuData, '选中');

          if (this.menuData.parentId == "-1") {
            this.parentName = "暂无父级菜单";
          } else {
            this.recursionTree(this.data1, this.menuData.parentId);
          }
        } else {
          this.menuData = "";
        }
      },
      // 递归菜单树，取父级name
      recursionTree(arr, parentId) {
        arr.forEach((item) => {
          if (item.id == parentId) {
            this.parentName = item.title;
          } else {
            this.recursionTree(item.children, parentId);
          }
        });
      },

      createChildMenu() {
        if (this.menuData.menuLevel > 4) {
          this.$Message.warning("菜单最大为5级。");
        } else {
          this.childFlag = false;
        }
      },
      createMenuNameCancel() {
        this.childFlag = true;
        this.createData = {
          createMenuName: "",
          // createMenuCode: '',
          createMenuType: "1",
        };
      },
      // tab切换
      tabValChange(val) {
        this.createMenuNameCancel();
        this.tabVal = val;
        this.menuData = "";
        this.getFunctionMenuList();
      },
    },
    created() {
      this.$nextTick(function() {
        this.onresizeHeight =
          window.innerHeight - this.$refs.TableHeight.offsetTop - 50;
      });
      this.getFunctionMenuList();
    },
  };
</script>
<style lang='scss' scoped>
  .navigationMenu {
    padding: 20px;

    .treeMenu {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-left: 10%;

      .treeMenuLeft {
        padding: 20px;
        width: 50%;
        height: 100%;
        overflow-y: auto;
      }

      .treeMenuRight {
        padding: 20px;
        flex: 1;

        .menuCurr {
          p {
            margin-top: 15px;

            span:first-child {
              display: inline-block;
              text-align: right;
              margin-right: 10px;
              width: 100px;
            }
          }

          .menuBtn {
            margin-top: 20px;

            >* {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }

  .treeMenuLeft::-webkit-scrollbar {
    width: 0 !important;
  }

  .treeMenuLeft::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
</style>